# security.sri

- **Type:**

```ts
type SriOptions = {
  enable?: 'auto' | boolean;
  algorithm?: 'sha256' | 'sha384' | 'sha512';
};
```

- **Default:** `undefined`
- **Version:** `>= 0.7.3`

Adding an `integrity` attribute to `<script>` and `<link rel="stylesheet">` tags introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.

## SRI

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.

For `<script>` tags, the result is to refuse to execute the code; for CSS links, the result is not to load the styles.

For more on subresource integrity, see [Subresource Integrity - MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).

## Example

When using SRI, you need to enable [html.crossorigin](/config/html/crossorigin), which ensures that resources can be properly validated with SRI during cross-origin loading.

```ts
export default {
  security: {
    src: {
      enable: 'auto',
    },
  },
  html: {
    crossorigin: 'anonymous',
  },
};
```

The `<script>` and `<link rel="stylesheet">` tags generated by Rsbuild will include the `integrity` and `crossorigin` attributes:

```html
<script
  defer
  src="https://cdn.com/static/js/index.js"
  crossorigin="anonymous"
  integrity="sha384-d8fhhhTWXaPPIEMw+POJ9hqCIRvsFbegq/oef7k9R8Rpb8Dy95B2THPOECdZoLDF"
></script>

<link
  href="https://cdn.com/static/css/index.css"
  rel="stylesheet"
  crossorigin="anonymous"
  integrity="sha384-8U9HYzsHbf55cFZyiWIE29+QPYQ9WO+U5uT/ViFw0TOwM2Fbbb74ZegzRV/nvwrD"
/>
```

## Limitations

The `security.sri` in Rsbuild will only apply to the tags generated by Rsbuild and will not apply to:

- The original tags in the HTML template.
- The tags injected asynchronously by Rspack.
- The tags inserted through client JavaScript code.

## Options

### enable

- **Type:** `'auto' | boolean`
- **Default:** `false`

Whether to enable SRI. `'auto'` means it's enabled during production builds and disabled during development builds.

```ts
export default {
  security: {
    sri: {
      enable: 'auto',
    },
  },
};
```

> Typically, you do not need to enable SRI during development.

### algorithm

- **Type:** `'sha256' | 'sha384' | 'sha512'`
- **Default:** `'sha384'`

Specifies the algorithm used to compute the integrity hash.

For example, set to `sha512`:

```ts
export default {
  security: {
    sri: {
      algorithm: 'sha512',
    },
  },
};
```

The generated value of integrity attribute will be prefixed with `sha512-`:

```html
<script
  defer
  src="https://cdn.com/static/js/index.js"
  crossorigin="anonymous"
  integrity="sha512-ShExVSs5q/j3ZBI/PeS0niJ4mBxh6tc08QN1uofI1dmGAx7ETMh8/VDddGRewxXQhjCgdgAnaiY3BfnWrUSmZA=="
></script>
```

> Reference: [Cryptographic hash functions](https://www.w3.org/TR/SRI/#cryptographic-hash-functions).
